<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>商品详情</title>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="assets/font-awesome-4.5.0/css/font-awesome.min.css" />	
		<link rel="stylesheet" href="css/product.css">
	</head>
	<body>
		<div class="container">
			<div class="lt_topnav">
                <a class="btn_left" href="javascript:;history.back()"><span class="fa fa-arrow-left"></span></a>
				<a class="btn_righ" href="javascript:;"><span class="mui-icon mui-icon-reload"></span></a>				
				<h3>商品详情</h3>
			</div>
			<div class="lt_content">
                    <div class="lt_wrapper">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
                                <!-- 动态渲染 -->
                                <div class="loading">
										<span class="mui-icon mui-spinner"></span>
								</div>
							</div>
						</div>
                    </div>
            </div>
            <div class="lt_trade">
                <a href="add/cart.html" class="mui-btn mui-btn-link">购物车</a>
                <div class="right">
                    <a href="javascript:;" class="mui-btn mui-btn-danger">加入购物车</a>
                    <a href="javascript:;" class="mui-btn mui-btn-warning">立即购买</a>
                </div>
            </div>
        </div>
        <script type="text/template" id="productDetail">
            <div class="mui-slider">
                    <!-- 1.1 轮播图播图-->
                    <% if(!pic || pic.length == 0) {
                        pic = [{'picAddr':'/m/images/none.png'}];
                    } %>
                    <div class="mui-slider-group mui-slider-loop">
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="<%= pic[pic.length - 1].picAddr %>" /></a></div>
                        <!-- start -->
                        <% for(var i = 0; i < pic.length; i++) { %>
                            <div class="mui-slider-item" data-id="<%= i %>"><a href="#"><img src="<%= pic[i].picAddr %>" /></a></div>
                        <% } %>
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="<%= pic[0].picAddr %>" /></a></div>
                    </div>
                    <!--1.2 小圆点-->
                     <div class="mui-slider-indicator">
                         <% for(var i = 0; i < pic.length; i++) { %>
                            <div class="mui-indicator <%= i==0 ? 'mui-active' : '' %>"></div>
                        <% } %>
                    </div>
                </div>
                <!-- 名称 -->
                <div class="lt_item">
                    <span class="mui-ellipsis-2"><%=proName%></span>
                </div>
                <!-- 价格 -->
                <div class="lt_item">
                    价格：<span class="now">&yen;<%=price%></span>&nbsp;<del class="old">&yen;<%=oldPrice%></del>
                </div>
                <!-- 尺码 -->
                <div class="lt_item">
                    尺码：
                    <%
                        var arr = (size || '35-48').split('-')
                        var start = arr[0];
                        var end = arr[1];
                    %>
                    <% for(var i = start;i <= end;i++){%>
                    <span class="size" ><%=i%></span>
                    <% }%>
                </div>
                <!-- 数量 -->
                <div class="lt_item">
                    数量：
                    <div class="mui-numbox" data-numbox-min="1" data-numbox-max="<%= num %>">
                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                        <input class="mui-input-numbox" type="number">
                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                    </div>
                    <span class="num">剩余数量：<%=num%>双</span>
                </div>
                <div class="lt_item">
                    详情：<span><%=proDesc%></span>
                </div>
        </script>
		<script src="assets/mui/js/mui.min.js"></script>
		<script src="js/common.js"></script>
		<script src="assets/zepto/zepto.min.js"></script>
		<script src="assets/artTemplate/template-native.js"></script>
		<script src="js/product.js"></script>
	</body>
</html>
